<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Cheese Factory</title>
	<link rel="stylesheet" href="framework.css" type="text/css">
	<script type="text/javascript" src="framework.js"></script>

<!-- Comment
@testcase: ITC_Component
@desc: Component의 내,외부 Data 처리를 테스트 한다.
@developer: 박준범(zzunya@gmail.com)
@APIname: rss(), data(), cheese.xml(), cheese.ajax()
@proc:


1. RSS - List

UI:
	List Component

Contents :
	[ user.js ]
	$("#dataList2").rss("test_rssbbc.xml",{ "image" : "thumbnail[url]" });

Result :
	3개의 아이템에 이미지, 헤드라인, 서브텍스트가 나온다.
	Touch시 리스트 색상과 글씨색이 변화한다.


2. RSS - Tab

UI :
	Tab Component

Contents :
	[ user.js ]
	$("#rssTab").rss(...)

Result :
	3개의 아이템에 이미지, 헤드라인, 서브텍스트가 나온다.
	Touch 시 Tab이 활성화되며 하단의 Subpage 가 정해진대로 Transition된다.
	기본값은 가로로 슬라이드 되며 전환된다.



3. Data List

UI:
	List Component

Contents :
	[ user.js ]
	$("#dataList1").data(listData1);

Result :
	여러 종류의 리스트 형태가 출력된다.
	Touch시 리스트 색상과 글씨색이 변화한다.


4. Data Tab

UI:
	Tab Component

Contents :
	[ user.js ]
	$("#dataTab").data (dataTab);

Result :
	4개의 탭과 하위 내용 Content1, Content2 ... 가 출력된다.
	Touch 시 Tab이 활성화되며 하단의 Subpage 가 정해진대로 Transition된다.
	기본값은 가로로 슬라이드 되며 전환된다.


5. Data PageControl

UI:
	Pagecontrol

Contents :
	[ user.js ]
	$("#dataPageControl").data(dataPagecontrol);

Result :
	총 4페이지가 출력된다.
	왼쪽, 오른쪽으로 Flick하면 정해진 효과대로 페이지가 전환된다.
	기본값은 가로로 슬라이드.


6. Setting List

UI:
	setList

Contents :
	[ user.js ]
	$("#dataList3").data(listData3);

Result :
	라디오버튼 2개 - 다중 체크 되지 않는다.
	체크박스 1개, 온오프1개 - Toggle 시 활성/비활성 된다.


7. Component Tab

UI : 
	Tab

Contents :
	[ user.js ]
	func ==> 
		$("#tabM").func({ 
				0 : function() { alert("func"); }
		});

	viewFunc ==>
		$("#tabM").viewFunc({
				0 : function() { alert("viewFunc"); }
		});
	
	sub ==>
		var subT = $("#tabM").sub(3);
		alert("subTest : " + subT.html());

	refresh ==>
		$("#tabM").refresh();

	autoRefresh ==>
		$("#tabM").autoRefresh(3000);

Result :
	위의 함수들 정상 동작된다.


8. Component PageControl
UI :
	PageControl

Contents :
	[ user.js ]
	rss ==>
		$("#pageControlM").rss(
			[{
				"rss1" : "http://175.125.20.219/xml/xml.php?url=http://175.125.20.219/xml/bbc.xml",
				"rss2" : "http://175.125.20.219/xml/xml.php?url=http://175.125.20.219/xml/bbc.xml",
				"rss3" : "http://175.125.20.219/xml/xml.php?url=http://175.125.20.219/xml/bbc.xml"
			}]);
		
	func ==>
		$("#pageControlM").func({
			0 : function() { alert("pageControl  func"); }
		});	

	viewFunc	==>
		$("#pageControlM").viewFunc({
			1 : function () { alert("pageControl : viewFunc"); }
		});

	enablePage ==>
		$("#pageControlM").enablePage(1);


	disablePage ==>
		$("#pageControlM").disablePage(1);

	refresh ==>
		$("#pageControlM").refresh();

	autoRefresh ==>
		$("#pageControlM").autoRefresh(3000);


Result : 
	위의 함수들 정상 동작된다.

-->
	
	
	<script language="javascript">
	$(function(){


		// 소프트 키 설정
		$.globalSetting({
			"softkeyData" : {
				"test1" : function() { alert("test1"); },
				"test2" : function() { alert("test2"); },
				"test3" : function() { alert("test3"); },
				"test4" : function() { alert("test4"); },
				"test5" : function() { alert("test5"); }
			}
		});

		// 리스트의 아이템 클릭 시 해당 페이지로 이동
		$("#idlego").tap(function(){					$.go("#index"); });
		$("#indexListPGData").tap(function(){			$.go("#sceneDataPageControl"); });
		$("#indexListPGRSS").tap(function(){			$.go("#sceneRSSPageControl"); });
		$("#indexListTabData").tap(function(){			$.go("#sceneDataTab"); });
		$("#indexListTabRSS").tap(function(){			$.go("#sceneRSSTab"); });
		$("#indexListListData").tap(function(){			$.go("#sceneDataList"); });
		$("#indexListListRSS").tap(function(){			$.go("#sceneRSSList"); });
		$("#indexListSetListData").tap(function(){		$.go("#sceneDataSetList"); });
		
		// setlist select
		$("#indexListSetListSelect").tap(function(){
			// setList에서 선택된 것들의 키값을 alert으로 출력
			var s = $("#dataSetList").select();
			for( var k in s )
				alert(s[k]);
		});
		
		//softkey
		$("#indexListSoftkeyType1").tap(function(){ 
			//소프트키 타입을 1로 변경
			$.globalSetting({ "softkeyType" : "type1" });
		});
		$("#indexListSoftkeyType2").tap(function(){ 
			//소프트키 타입을 2로 변경
			$.globalSetting({ "softkeyType" : "type2" });
		});

		// page control
		var dataPageControlData = [
			"<div></div>",
			{
				"page1" : [function() { Cheese(this).sub().find("div").text("page1"); }, function( ) { }],
				"page2" : [function() { Cheese(this).sub().find("div").text("page2"); }, function( ) { }],
				"page3" : [function() { Cheese(this).sub().find("div").text("page3"); }, function( ) { }]
			}
		];
		$("#dataPageControl").data( dataPageControlData );

		 var dataPageControlSoftkeyData = {
			"func" : function() {
				// 이 함수를 실행하고 0번째 페이지로 이동하면 아래의 함수가 호출
				$("#dataPageControl").func({
						0 : function() { alert("pageControl  func"); }
				});
			},
		
			"viewFunc" : function() {
				// 본 함수를 실행하고 1번째 페이지로 이동하고 처음 들어왔다면 다음 함수 호출
				$("#dataPageControl").viewFunc({
						1 : function () { alert("pageControl : viewFunc"); }
				});
			},
					
			"disablePage" : function() {
				// 페이지 컨트롤의 위의 페이지 네이베이션 바를 이용하여 좌우로 이동할 때 1번재 페이지로는 이동하지 않음
				$("#dataPageControl").disablePage(1);
			},

			"enableFunc" : function() {
				// 페이지 컨트롤의 위의 페이지 네이베이션 바를 이용하여 좌우로 이동할 때 1번재 페이지로 이동할 수 있도록 함
				$("#dataPageControl").enablePage(1);
			},

			"refresh" : function () {
				// 현제 페지지의 viewFunc와 func를 실행
				$("#dataPageControl").refresh();
			},
			
			"autoRefresh" : function() {
				// 3초 마다 현재 페이지의 viewFunc와 func를 실행
				$("#dataPageControl").autoRefresh(3000);
			}
		};
		
		$("#sceneDataPageControl").option({
			"softkeyData" : dataPageControlSoftkeyData
		});

		$("#rssPageControl").rss(
		[{
			"rss1" : "http://175.125.20.219/xml/xml.php?url=http://175.125.20.219/xml/bbc.xml",
			"rss2" : "http://175.125.20.219/xml/xml.php?url=http://175.125.20.219/xml/bbc.xml",
			"rss3" : "http://175.125.20.219/xml/xml.php?url=http://175.125.20.219/xml/bbc.xml"
		}]);

		// tab
		var dataTabData = {
			"tab1" : ["<div>tab1</div>", function() {}, function( ) { }],
			"tab2" : ["<div>tab2</div>", function() {}, function( ) { }],
			"tab3" : ["<div>tab3</div>", function() {}, function( ) { }]
		};

		$("#dataTab").data( dataTabData );

		 var dataTabSoftkeyData = {
			"func" : function () {
				// 이 함수를 실행하고 0번째 탭으로 이동하면 아래의 함수가 호출
				$("#dataTab").func({ 
						0 : function() { alert("func"); }
				});
			},
			
			"viewFunc" : function() {
				// 본 함수를 실행하고 1번째 탭으로 이동하고 처음 들어왔다면 다음 함수 호출
				$("#dataTab").viewFunc({
						0 : function() { alert("viewFunc"); }
				});
			},
			
			"sub" : function() {
				// 본 함수는 3번재 탭의 subScene을 선택하여 반환
				var subT = $("#dataTab").sub(3);
				alert("subTest : " + subT.html());
			},
			
						
			"refresh" : function() {
				// 현제 탭 페이지의 viewFunc와 func를 실행
				$("#dataTab").refresh();
			},
						
			"autoRefresh" : function() {
				// 3초 마다 현제 페지지의 viewFunc와 func를 실행
				$("#dataTab").autoRefresh(3000);
			}
		};

		$("#sceneDataTab").option({
			"softkeyData" : dataTabSoftkeyData
		});

		$("#rssTab").rss(
		[{
			"rss1" : "http://175.125.20.219/xml/xml.php?url=http://175.125.20.219/xml/bbc.xml",
			"rss2" : "http://175.125.20.219/xml/xml.php?url=http://175.125.20.219/xml/bbc.xml",
			"rss3" : "http://175.125.20.219/xml/xml.php?url=http://175.125.20.219/xml/bbc.xml"
		}]);

		// list
		var dataListData = [
			["text", "Title Text","Sub text description Sub text description Sub text description"],
			["radio", "radio1"],
			["radio", "radio2"],
			["check", "check"],
			["check", "check"],
			["onoff", "onoff"],
			["accordion", "accordion",
				[
					["text", "RSS List","subtt", function() {} ],
					["text", "RSS List","subtt", function() {} ]
				]
			],
			["img", "img/sample_img1.png", "img"],
			["img", "img/sample_img1.png", "img", "subtext" ],
			["img2", "img/sample_img1.png", "img", "subtext" ],

		];
		$("#dataList").data( dataListData );

		 var dataListSoftkeyData = {
			"func" : function () {
				// 리스트의 0번째 아이템을 클릭하면 다음함수 실행
				$("#dataList").func({ 
						0 : function() { alert("func"); }
				});
			},
			
			"sub" : function() {
				//리스트의 3번째 아이템을 선택
				var subT = $("#dataList").sub(3);
				alert("subTest : " + subT.html());
			},
				
			"removeItem" : function() {
				//리스트의 0번재 아이템을 삭제
				$("#dataList").removeItem(0);
			},
						
		};

		$("#sceneDataList").option({
			"softkeyData" : dataListSoftkeyData
		});	

		$("#rssList").rss( "http://175.125.20.219/xml/xml.php?url=http://175.125.20.219/xml/bbc.xml" );

		// setlist
		var dataSetListData = [
			["radio", "radio1"],
			["radio", "radio2"],
			["check", "check"],
			["check", "check"],
			["onoff", "onoff"],
		];
		$("#dataSetList").data( dataSetListData );



	});
	</script>
</head>
<body>

<!-- Idle -->
<div id="idle" class="idle">
	<div id="idlego">
	V0.98
	</div>
</div>
<!-- //idle -->

<div class="title">
	ITC_Component
</div>

<div class="setTitle">
	setList
</div>

<!-- index-->
<div class="scene" id="index">

	<div class="list">
		<div class="subTit">
			PageControl
		</div>
		<ul>
			<li id="indexListPGData">Data PageControl</li>
			<li id="indexListPGRSS">RSS PageControl</li>
		</ul>

		<div class="subTit">
			Tab
		</div>
		<ul>
			<li id="indexListTabData">Data Tab</li>
			<li id="indexListTabRSS">RSS Tab</li>
		</ul>

		<div class="subTit">
			List
		</div>
		<ul>
			<li id="indexListListData">Data List</li>
			<li id="indexListListRSS">RSS List</li>
		</ul>

		<div class="subTit">
			SetList
		</div>
		<ul>
			<li id="indexListSetListData">Data SetList</li>
			<li id="indexListSetListSelect">SetList Select</li>
		</ul>

		<div class="subTit">
			Softkey
		</div>
		<ul>
			<li id="indexListSoftkeyType1">Softkey Type1</li>
			<li id="indexListSoftkeyType2">Softkey Type2</li>
		</ul>

	</div>
</div>
<!-- //index-->

<!-- pagecontrol -->
<div class="scene" id="sceneDataPageControl">
	<div class="pageControl" id="dataPageControl">
	</div>
</div>

<!-- rss pagecontrol -->
<div class="scene" id="sceneRSSPageControl">
	<div class="pageControl" id="rssPageControl">
	</div>
</div>

<!-- tab -->
<div class="scene" id="sceneDataTab">
	<div class="tab" id="dataTab">
	</div>
</div>

<!-- rss tab -->
<div class="scene" id="sceneRSSTab">
	<div class="tab" id="rssTab">
	</div>
</div>

<!-- list -->
<div class="scene" id="sceneDataList">
	<div class="list" id="dataList">
	</div>
</div>

<!-- rss list -->
<div class="scene" id="sceneRSSList">
	<div class="list" id="rssList">
	</div>
</div>

<!-- setList -->
<div class="scene" id="sceneDataSetList">
	<div class="setList" id="dataSetList">
	</div>
</div>

</body>
</html>



